<template>
    <TabGrayBarCard :title="'客流量'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList"
        :echartId="`myEChartsBar-${props.permi}-passengerFlow`" :echartData="card.echartData" :lineText="''" :barText="'客流量'"
        :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }"
        v-if="isShow">
    </TabGrayBarCard>
</template>

<script setup>
import TabGrayBarCard from '@/DbComponents/tabGrayBarCard'
import { toThousands, dateFormat } from '@/utils/number-util'
import dashBoardApi from '@/api/JointVenture/dashBoard'
import { ref, reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
// import { useRouter } from 'vue-router'
// const router = useRouter()

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    projectZylyCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }],
        curTab: '日',
        tabRight: '',
        grayCardList: [{ label: '当日', value: '', unit: '', color: '', des: '' }, { label: '当周日均', value: '', unit: '', color: '', des: '' }, { label: '同比上周', value: '', unit: '%', color: '', des: '' }],
        unitText: '',
        updateText: '',
        echartData: {},
        startDate: '',
        endDate: '',
    }
)
const getCardData = () => {
    dashBoardApi.saleroomFlowCardApi({ projectZylyCode: props.projectZylyCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = res.data.data.timeLab
            card.grayCardList[0].value = toThousands(res.data.data.flow)
            card.grayCardList[1].value = toThousands(res.data.data.avgFlow)
            card.grayCardList[2].value = toThousands(res.data.data.yoyValue)
            card.unitText = res.data.data.valueUnit
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartData = () => {
    dashBoardApi.saleroomFlowChartApi({ projectZylyCode: props.projectZylyCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            card.echartData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}
const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    // if (card.curTab == '日') {
    //     router.push({
    //         path: '/Manage/Business/salesVolumeBrand',
    //         query: {
    //             // rid: 'page_dashboard_pc_iframe',
    //             rTitle: '品牌销售明细',
    //             biProjectCode: props.biProjectCode,
    //             dataTime: props.updateDate,
    //         },
    //     })
    // } else {
    //     router.push({
    //         path: '/Manage/Business/salesVolume',
    //         query: {
    //             // rid: 'page_dashboard_pc_iframe',
    //             rTitle: '销售明细',
    //             biProjectCode: props.biProjectCode,
    //             startDate: card.startDate,
    //             endDate: card.endDate,
    //         },
    //     })
    // }
}
const changeTab = (value) => {
    // 切换tab，更换开始和结束日期
    // 按天：开始和结束日期，均为【数据更新日期】
    // 按月：开始日期为【数据更新日期】当月第一天，结束日期为【数据更新日期】
    // 按年：开始日期为【数据更新日期】当年第一天，结束日期为【数据更新日期】
    if (value == '日') {
        card.grayCardList[0].label = '当日'
        card.grayCardList[1].label = '当周日均'
        card.grayCardList[2].label = '同比上周'

        card.startDate = props.updateDate
    }
    if (value == '月') {
        card.grayCardList[0].label = '当月累计'
        card.grayCardList[1].label = '当月日均'
        card.grayCardList[2].label = '同比上月'

        card.startDate = dateFormat(new Date(props.updateDate), 'YYYY-MM') + '-01'
    }
    if (value == '年') {
        card.grayCardList[0].label = '当年累计'
        card.grayCardList[1].label = '当年日均'
        card.grayCardList[2].label = '同比上年'

        card.startDate = dateFormat(new Date(props.updateDate), 'YYYY') + '-01-01'
    }
    card.endDate = props.updateDate
    card.curTab = value

    getCardData()
    getChartData()
}

let isShow =ref(false)
const getShow = async () => {
  await dashBoardApi.flowIsShowApi({ projectZylyCode: props.projectZylyCode }).then((res) => {
    if (res.data.code == 200) {
      isShow.value = res.data.data == 1 ? true : false
      console.log(isShow.value)
    }
  }).catch(err => {
    console.log(err)
  });
}

const init = async () => {
  await getShow()
  if(isShow.value) {
    changeTab(card.curTab)
  }
}
init()

const projectZylyCode = computed(() => {
    return props.projectZylyCode
});
watch(projectZylyCode, () => {
    init()
}, { deep: true });

</script>

<style scoped lang="scss"></style>
